<template>
  <div class="ele-body">
    <div class="ele-bg-white padding-15">
      <div>
        <div class="cashier_title">基础设置</div>
        <a-form
          labelAlign="left"
          :label-col="{ md: { span: 4 }, sm: { span: 8 }, xs: { span: 16 } }"
          :wrapper-col="{
            md: { span: 20 },
            sm: { span: 24 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="24" :sm="24" :xs="24">
              <a-form-item label="零售抹零小数位">
                <a-radio-group v-model:value="form.small_change">
                  <a-radio value="1">四舍五入</a-radio>
                  <a-radio value="2">只舍不入</a-radio>
                  <a-radio value="3">只入不舍</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="零售销售日期">
                <a-radio-group v-model:value="form.sales_time">
                  <a-radio value="1">允许选择</a-radio>
                  <a-radio value="2">默认当天（网络时间）</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="退货期限">
                <a-radio-group
                  v-model:value="form.refund_type"
                  @change="change8"
                >
                  <a-radio value="1"
                    >从销售日起
                    <a-input
                      style="width: 100px"
                      v-model:value="form.refund_valid"
                      placeholder="请输入"
                      allow-clear
                    />
                    天内，可退货（最长30天）</a-radio
                  >
                  <a-radio value="2">不允许退货</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="零售修改">
                <a-checkbox-group
                  v-model:value="sales_alter"
                  :options="options"
                  @change="change4"
                />
              </a-form-item>
              <a-form-item label="零售权限">
                <span class="margin-right-15"
                  >不允许低于
                  <a-input
                    style="width: 100px"
                    v-model:value="form.piece_min_discount"
                    placeholder="请输入"
                    allow-clear
                  />
                  折（标价）</span
                >
                <span
                  >不允许低于
                  <a-input
                    style="width: 100px"
                    v-model:value="form.gram_min_discount"
                    placeholder="请输入"
                    allow-clear
                  />
                  元/克（按克）</span
                >
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div>
        <div class="cashier_title">单据显示</div>
        <a-form
          labelAlign="left"
          :label-col="{ md: { span: 4 }, sm: { span: 8 }, xs: { span: 16 } }"
          :wrapper-col="{
            md: { span: 20 },
            sm: { span: 24 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="24" :sm="24" :xs="24">
              <a-form-item label="已付款的销售单是否显示">
                <a-radio-group v-model:value="form.payed_show">
                  <a-radio value="1">是</a-radio>
                  <a-radio value="2">否</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="退货单是否显示">
                <a-radio-group v-model:value="form.refund_show">
                  <a-radio value="1">是</a-radio>
                  <a-radio value="2">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div>
        <div class="cashier_title"> 数据查询</div>
        <a-form
          labelAlign="left"
          :label-col="{ md: { span: 4 }, sm: { span: 8 }, xs: { span: 16 } }"
          :wrapper-col="{
            md: { span: 20 },
            sm: { span: 24 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="24" :sm="24" :xs="24">
              <a-form-item label="销售单查询">
                <a-radio-group
                  v-model:value="form.sales_search_type"
                  @change="change5"
                >
                  <a-radio value="1">当日</a-radio>
                  <a-radio value="2">当月</a-radio>
                  <a-radio value="3">所有</a-radio>
                  <a-radio value="4"
                    >指定日期<a-range-picker
                      style="margin-left: 15px"
                      v-model:value="defaultPickerValue1"
                      :format="dateFormat"
                      @change="change1"
                  /></a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="退货单查询">
                <a-radio-group
                  v-model:value="form.refund_search_type"
                  @change="change6"
                >
                  <a-radio value="1">当日</a-radio>
                  <a-radio value="2">当月</a-radio>
                  <a-radio value="3">所有</a-radio>
                  <a-radio value="4"
                    >指定日期<a-range-picker
                      style="margin-left: 15px"
                      v-model:value="defaultPickerValue2"
                      :format="dateFormat"
                      @change="change2"
                  /></a-radio>
                </a-radio-group>
              </a-form-item>
              <!-- <a-form-item label="定金单查询">
                <a-radio-group
                  v-model:value="form.deposit_search_type"
                  @change="change7"
                >
                  <a-radio value="1">当日</a-radio>
                  <a-radio value="2">当月</a-radio>
                  <a-radio value="3">所有</a-radio>
                  <a-radio value="4"
                    >指定日期<a-range-picker
                      style="margin-left: 15px"
                      v-model:value="defaultPickerValue3"
                      :format="dateFormat"
                      @change="change3"
                  /></a-radio>
                </a-radio-group>
              </a-form-item> -->
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div>
        <div class="cashier_title">核销设置</div>
        <a-form
          labelAlign="left"
          :label-col="{ md: { span: 4 }, sm: { span: 8 }, xs: { span: 16 } }"
          :wrapper-col="{
            md: { span: 20 },
            sm: { span: 24 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="24" :sm="24" :xs="24">
              <!-- <a-form-item label="定金核销">
                <a-radio-group v-model:value="form.deposit_verify">
                  <a-radio value="1">手工核销</a-radio>
                  <a-radio value="2">扫码核销</a-radio>
                </a-radio-group>
              </a-form-item> -->
              <a-form-item label="卡券核销">
                <a-radio-group v-model:value="form.coupon_verify">
                  <a-radio value="1">手工核销</a-radio>
                  <a-radio value="2">扫码核销</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="储值核销">
                <a-radio-group v-model:value="form.stored_verify">
                  <a-radio value="1">手工核销</a-radio>
                  <a-radio value="2">扫码核销</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="积分抵现">
                <a-radio-group v-model:value="form.points_deduction">
                  <a-radio value="1">开</a-radio>
                  <a-radio value="2">关</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- <div>
        <div class="cashier_title">定金设置</div>
        <a-form
          labelAlign="left"
          :label-col="{ md: { span: 4 }, sm: { span: 8 }, xs: { span: 16 } }"
          :wrapper-col="{
            md: { span: 20 },
            sm: { span: 24 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="24" :sm="24" :xs="24">
              <a-form-item label="退定金">
                <a-radio-group v-model:value="form.deposit_refund">
                  <a-radio value="1">开</a-radio>
                  <a-radio value="2">关</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div> -->

      <div style="margin: 20px 0 0 0">
        <a-space>
          <a-button type="primary" @click="submit()">保存</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import { setting_list, edit_setting } from '@/api/setting/cashier_setting';

  const sales_alter = ref([]);
  const options = ref([
    { label: '净金重', value: 1, name: '1', checked: false },
    { label: '销售金价', value: 2, name: '2', checked: false },
    { label: '销售工费', value: 4, name: '4', checked: false },
    { label: '固定折扣', value: 8, name: '8', checked: false },
    { label: '回收金价', value: 16, name: '16', checked: false },
    { label: '回收工费', value: 32, name: '32', checked: false },
    { label: '回收金额', value: 64, name: '64', checked: false }
  ]);
  const form = reactive({
    small_change: '',
    sales_time: '',
    refund_type: '',
    refund_valid: '',
    sales_alter: 0,
    piece_min_discount: '',
    gram_min_discount: '',
    payed_show: '',
    refund_show: '',
    sales_search_type: '',
    sales_search_start_time: '',
    sales_search_end_time: '',
    refund_search_type: '',
    refund_search_start_time: '',
    refund_search_end_time: '',
    deposit_search_type: '',
    deposit_search_start_time: '',
    deposit_search_end_time: '',
    deposit_verify: '',
    coupon_verify: '',
    stored_verify: '',
    points_deduction: '',
    deposit_refund: ''
  });
  const dateFormat = ref('YYYY-MM-DD');
  const getYMD = () => {
    let myDate = new Date();
    let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    let myToday = myDate.getDate(); //获取当前日(1-31)
    myMonth = myMonth > 9 ? myMonth : '0' + myMonth;
    myToday = myToday > 9 ? myToday : '0' + myToday;
    let nowDate = myYear + '-' + myMonth + '-' + myToday;
    return nowDate;
  };
  const defaultPickerValue1 = ref([
    /* dayjs(getYMD(), dateFormat.value),
    dayjs(getYMD(), dateFormat.value) */
  ]);
  const defaultPickerValue2 = ref([
    /* dayjs(getYMD(), dateFormat.value),
    dayjs(getYMD(), dateFormat.value) */
  ]);
  const defaultPickerValue3 = ref([
    /* dayjs(getYMD(), dateFormat.value),
    dayjs(getYMD(), dateFormat.value) */
  ]);

  onMounted(() => {
    setting_list().then((res) => {
      Object.keys(form).forEach((key) => {
        form[key] = res.data[key] ? res.data[key].toString() : '';
      });

      if (res.data.sales_search_start_time && res.data.sales_search_end_time) {
        defaultPickerValue1.value = [
          dayjs(res.data.sales_search_start_time, dateFormat.value),
          dayjs(res.data.sales_search_end_time, dateFormat.value)
        ];
      }
      if (
        res.data.refund_search_start_time &&
        res.data.refund_search_end_time
      ) {
        defaultPickerValue2.value = [
          dayjs(res.data.refund_search_start_time, dateFormat.value),
          dayjs(res.data.refund_search_end_time, dateFormat.value)
        ];
      }
      if (
        res.data.deposit_search_start_time &&
        res.data.deposit_search_end_time
      ) {
        defaultPickerValue3.value = [
          dayjs(res.data.deposit_search_start_time, dateFormat.value),
          dayjs(res.data.deposit_search_end_time, dateFormat.value)
        ];
      }

      let arr = res.data.sales_alter
        .toString(2)
        .split('')
        .reverse()
        .join('')
        .split('');
      sales_alter.value = [];
      arr.forEach((item, index) => {
        options.value[index].checked = item == 1 ? true : false;
        if (item == 1) {
          sales_alter.value.push(options.value[index].value);
        }
      });
    });
  });

  const change1 = (date, dateString) => {
    form.sales_search_start_time = dateString[0];
    form.sales_search_end_time = dateString[1];
  };
  const change2 = (date, dateString) => {
    form.refund_search_start_time = dateString[0];
    form.refund_search_end_time = dateString[1];
  };
  const change3 = (date, dateString) => {
    form.deposit_search_start_time = dateString[0];
    form.deposit_search_end_time = dateString[1];
  };
  const change4 = (e) => {
    form.sales_alter = 0;
    e.forEach((item) => {
      form.sales_alter += Number(item);
    });
  };
  const change5 = (e) => {
    if (e.target.value == 1 || e.target.value == 2 || e.target.value == 3) {
      form.sales_search_start_time = '';
      form.sales_search_end_time = '';
    }
  };
  const change6 = (e) => {
    if (e.target.value == 1 || e.target.value == 2 || e.target.value == 3) {
      form.refund_search_start_time = '';
      form.refund_search_end_time = '';
    }
  };
  const change7 = (e) => {
    if (e.target.value == 1 || e.target.value == 2 || e.target.value == 3) {
      form.deposit_search_start_time = '';
      form.deposit_search_end_time = '';
    }
  };
  const change8 = (e) => {
    if (e.target.value == 2) {
      form.refund_valid = '';
    }
  };
  const submit = () => {
    console.log(form);
    if (
      form.sales_search_type == 1 ||
      form.sales_search_type == 2 ||
      form.sales_search_type == 3
    ) {
      form.sales_search_start_time = '';
      form.sales_search_end_time = '';
    }
    if (
      form.refund_search_type == 1 ||
      form.refund_search_type == 2 ||
      form.refund_search_type == 3
    ) {
      form.refund_search_start_time = '';
      form.refund_search_end_time = '';
    }
    if (
      form.deposit_search_type == 1 ||
      form.deposit_search_type == 2 ||
      form.deposit_search_type == 3
    ) {
      form.deposit_search_start_time = '';
      form.deposit_search_end_time = '';
    }
    if (form.refund_type == 2) {
      form.refund_valid = '';
    }
    edit_setting(form)
      .then((res) => {
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e.message);
      });
  };
</script>

<style lang="less" scoped>
  .cashier_title {
    background-color: #f5f5f5;
    padding: 6px 15px;
    font-size: 16px;
    font-weight: bolder;
    margin-bottom: 30px;
  }
</style>
